<template>
  <section class="page">
    <data-form :model="roleModel" @onSearch="refreshRoleData" :page="pageService">
      <template slot="default-input">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleModel.roleName"></el-input>
        </el-form-item>
      </template>
      <template slot="default-button">
        <el-button @click="addRoleClick()">新增角色</el-button>
      </template>
    </data-form>

    <data-box :data="roleList" @onPageChange="refreshRoleData" :page="pageService" ref="data-box">
      <template slot="columns">
        <el-table-column prop="roleName" label="角色名称" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="角色描述" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" @click="modifyClick(scope)">修改</el-button>
            <el-button type="text" @click="assignResource(scope)">分配资源</el-button>
            <el-button type="text" size="small" @click="userListClick(scope)">用户列表</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!-- 添加角色 -->
    <el-dialog title="添加角色" :close-on-click-modal="false" :visible.sync="isOpenAddRoleDialog" width="450px" :show-close="false">
      <add-role ref="add-role" @refresh="refreshRoleData()" @close="isOpenAddRoleDialog = false"></add-role>
    </el-dialog>

    <!-- 修改角色 -->
    <el-dialog title="修改角色" :close-on-click-modal="false" :visible.sync="isOpenModifyRoleDialog" width="450px" :show-close="false">
      <modify-role ref="modify-role" @refresh="refreshRoleData()" @close="isOpenModifyRoleDialog = false" :rowRoleObj="rowRoleObj"></modify-role>
    </el-dialog>

    <!-- 用户列表 -->
    <el-dialog title="用户列表" :close-on-click-modal="false" :visible.sync="isOpenUserListDialog" width="700px">
      <user-list ref="user-list" @close="isOpenUserListDialog = false" :roleId="rowRoleObj.id"></user-list>
    </el-dialog>

    <!-- 模块资源 -->
    <el-dialog title="模块资源" :close-on-click-modal="false" :visible.sync="isOpenModuleDialog" width="700px">
      <module-resource ref="module-resource" @close="isOpenModuleDialog = false" :roleId="rowRoleObj.id"></module-resource>
    </el-dialog>

  </section>
</template>


<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/util/page.service";
import { RoleService } from "~/service/service-manage/role.service";
import DataBox from "~/components/common/data-box.vue";
import DataForm from "~/components/common/data-form.vue";
import AddRole from '~/components/system-manage/role-manage/add-role.vue'
import ModifyRole from '~/components/system-manage/role-manage/modify-role.vue'
import UserList from '~/components/system-manage/role-manage/user-list.vue'
import ModuleResource from '~/components/system-manage/role-manage/module-resource.vue'

@Layout("workspace")
@Component({
  components: {
    DataBox,
    DataForm,
    AddRole,
    ModifyRole,
    UserList,
    ModuleResource
  }
})
export default class RoleManage extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(RoleService) private roleService: RoleService;

  // 角色数据
  private roleList: Array<any> = [];
  // 选中角色
  private rowRoleObj: any = {};

  // 角色搜索条件
  private roleModel: any = {
    roleName: ''
  }

  // 弹框控制
  private isOpenAddRoleDialog: boolean = false;
  private isOpenModifyRoleDialog: boolean = false;
  private isOpenUserListDialog: boolean = false
  private isOpenModuleDialog: boolean = false

  private activated() {
    this.refreshRoleData()
  }

  /**
   * 查询角色
   */
  private refreshRoleData() {
    this.roleService.findRoleListByPage(this.roleModel, this.pageService).subscribe(
      data => {
        this.roleList = data
      },
      ({ msg }) => this.$message.error(msg)
    )
  }

  /**
   * 新增角色点击
   */
  private addRoleClick() {
    this.isOpenAddRoleDialog = true
  }

  /**
   * 修改按钮点击事件
   */
  private modifyClick(scope) {
    this.rowRoleObj = scope.row
    this.isOpenModifyRoleDialog = true
    this.$nextTick(() => {
      let modifyRef: any = this.$refs["modify-role"]
      modifyRef.refresh(this.rowRoleObj)
    })
  }

  /**
   * 用户列表按钮点击事件
   */
  private userListClick(scope) {
    this.rowRoleObj = scope.row
    this.isOpenUserListDialog = true
    this.$nextTick(() => {
      let userListRef: any = this.$refs["user-list"]
      userListRef.refreshUserData()
    })
  }

  /**
   * 角色分配资源按钮点击事件
   */
  private assignResource(scope) {
    this.rowRoleObj = scope.row
    this.isOpenModuleDialog = true
    this.roleService.findRoleResourceList(scope.row.id).subscribe(
      data => {
        this.$nextTick(() => {
          let moduleRef: any = this.$refs["module-resource"]
          moduleRef.refreshData(data)
        })
      },
      ({ msg }) => this.$message.error(msg)
    )

  }
}
</script>
<style lang="less">
.data-form {
  .search-button,
  .reset-button {
    background-color: #ffffff;
    color: #20a0ff;
  }
}
</style>


